<template>
  <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body :close-on-click-modal="false" v-dialogDrag>
     <div  id="printable-table-min">
       <el-table border v-loading="loading" :data="dataList" @selection-change="handleSelectionChange" ref="table"
                show-summary :summary-method="getSummaries"
                :max-height="tableMaxHeight">
        <!--序号-->
        <el-table-column label="序号" type="index" width="50" align="center"></el-table-column>
        <el-table-column label="供应商名称" align="center" prop="supplierName"/>
        <el-table-column label="开户行" align="center" prop="bankName"/>
        <el-table-column label="银行户号" align="center" prop="bankNo"/>
        <el-table-column label="账户" align="center" prop="accountNo"/>
        <el-table-column label="支付时间" align="center" prop="payTime" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.payTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="付款金额" align="center" prop="money"/>
        <el-table-column  align="center" label="状态" prop="status">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.pay_record_status" :value="scope.row.status"/>
          </template>
        </el-table-column>
      </el-table>
     </div>
    <div slot="footer" class="dialog-footer">
         <el-button @click="handlePrint" icon="el-icon-printer" type="primary">打 印</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>

</template>

<script>
import {accAdd, deleteAction, getAction} from '@/api/manage'
export default {
  name: "PrinterForm",
  dicts:["pay_record_status"],
  components: {
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      activeName: "first",
      // 弹出层标题
      title: "打款记录打印页",
      // 是否显示弹出层
      open: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 付款记录表格数据
      dataList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        applyId: null,
        supplierId: null,
        supplierName: null,
        payTime: null,
        money: null,
        status: '0',
        orderByColumn: 'payTime',
        isAsc: 'desc',
      },
      url: {
        list: '/payRecord/payRecord/list',
        remove: '/payRecord/payRecord/',
        cancel: '/payRecord/payRecord/cancel/',
        export: '/payRecord/payRecord/export',
      },
      tableMaxHeight: window.innerHeight - 320,
    };
  },
  created() {
    this.getList();
    window.addEventListener('resize', this.getTableHeight);
  },
  destroyed() {
    window.removeEventListener('resize', this.getTableHeight)
  },
  methods: {
    handlePrint() {
      // window.print();
      let id = "printable-table-min";
      let printStr = "<html><head><meta http-equiv='Content-Type' content='text/html; charset=utf-8'></head>";
      // 定义element-ui table组件的样式
      // box-sizing:border-box;
      //display:table-cell!important;
      const tabStyle =
        `<style>
      table{width:100%;}
      .el-table__body-wrapper{ max-height:none !important;box-sizing:border-box;}
      .el-table{ max-height:none !important;}
      .el-table__header,.el-table__body,.el-table__footer{ table-layout:fixed!important; width:100%!important;border-collapse: collapse;text-align:center;}
      table,table tr th, table tr td {border:0.5px solid black;color:black;word-wrap:break-word;}
      .el-table__header { border-collapse: collapse !important;}
      table tr th,table tr td{ padding:0.1mm 0mm;word-wrap:break-word; }
      .el-table__body, tr td .cell{width:100%!important;}
      .el-table th.gutter{display: none;}
      .el-table colgroup.gutter{display: none;}
      .el-table tr{
        height: 15px !important;
        font-size:16px !important;
      }

      .el-table--enable-row-transition{
        border: 0px solid black !important;
      }

      .el-table__header{ border-collapse: inherit;}
       @media print{
       table{page-break-after: auto;}
       tr{page-break-inside: avoid; page-break-after: auto;}
       td{page-break-inside: avoid; page-break-after: auto;}
       thead{display: table-header-group;}
       tfoot{display: table-footer-group;}
       }
      // --------------------隐藏table gutter列和内容区右侧的空白 start
      .el-table th.gutter{
        display: none;
        width:0
      }
      .el-table colgroup col[name='gutter']{
        display: none;
        width: 0;
      }
      .el-table__body{
        width: 100% !important;
      }
      .table-header{
        width: 95% !important;
        margin: 0 auto;
      }
      .table-tr{
      width: 100% !important;
      display: flex;
      }
      .table-td3{
        width:33%;
        word-wrap: break-word;
        height: 20px;
        font-size:14px !important;
      }
      .table-td2{
        width:50%;
        height: 20px;
        line-height: 20px;
        font-size:14px !important;
      }

      .table-td5{
        width:20%;
        height: 20px;
        line-height: 20px;
        font-size:14px !important;
      }


      </style>`;
      let content = "";
      // 获取名为传入id的 dom元素内的内容
      let str = document.getElementById(id).innerHTML;

      // 拼接空页面+style样式+dom内容
      content = content + str;

      printStr = printStr + '<body><div id="ceshi" style="height:atuo;">' + content + "</div></body>" + tabStyle + "</html>";
      // 打开新页面
      let pwin = window.open("_blank");
      // 将内容赋值到新页面
      pwin.document.write(printStr);
      // document.getElementsByTagName('body')[0].style.zoom = 0.75
      pwin.document.close();
      // 聚焦-不加focuse，在某些情况下，打印页面会有问题。
      pwin.focus();
      // 使用setTimeout，等页面dom元素渲染完成后再打印。
      setTimeout(() => {
        pwin.print(); // 打印功能。 例如 window.print() 直接打印当前整个页面。
        // document.getElementsByTagName('body')[0].style.zoom = 1;
        pwin.close(); // 关闭 打印创建的当前页面
      }, 500);

    },
    /** 查询付款记录列表 */
    getList() {
      this.loading = true;
      getAction(this.url.list, this.queryParams).then(response => {
        this.dataList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    getTableHeight() {
      this.tableHeight = window.innerHeight - 320
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.$refs.form.handleAdd();
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.$refs.form.handleUpdate(row);
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      deleteAction(this.url.remove, ids).then(response => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(this.url.export, {
        ...this.queryParams
      }, `payRecord_${new Date().getTime()}.xlsx`)
    },

    showPayRecordList(applyId){
      this.open = true;
      this.queryParams.applyId = applyId;
      this.getList();
    },

    handleCancelPay(row){
      const ids = row.id || this.ids;
      deleteAction(this.url.cancel, ids).then(response => {
        this.getList();
        this.$modal.msgSuccess("取消成功");
      }).catch(() => {
      });

    },

    getSummaries(param) {
      const {columns, data} = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        // 只合计money，想合并哪些列就在这里指定 排除status为2的
        if ( column.property === "money") {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return accAdd(prev , curr);
              } else {
                return prev;
              }
            }, 0);
        }
      });
      return sums;
    },

    handleDetail(row){
      this.$refs.detail.showDetail(row);
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.$emit('ok');
    },




  }
};
</script>
